<template>
    <div>
        <a-card title="日记标题">
            <template>
                <a-input placeholder="请输入你的标题" v-model="diary.title"/>
            </template>
            <div style="margin-top: 20px;">
                <a-upload name="file" :multiple="true" action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                    :headers="headers" @change="handleChange">
                    <a-button> <a-icon type="upload" /> 上传你的日记封面 </a-button>
                </a-upload>
            </div>
        </a-card>
        <mavon-editor v-model="value" @imgAdd="uploadImg" @save="saveDiary">
            <!-- 左工具栏前加入自定义按钮 -->
            <template slot="left-toolbar-before">
                <button type="button" @click="$click('test')" class="op-icon fa fa-mavon-align-left" aria-hidden="true"
                    title="视频"></button>
            </template>
        </mavon-editor>
    </div>
</template>

<script>
export default {
    data() {
        return {
            value: '请开始输入',
            diary:{}
        }
    },
    methods: {
        saveDiary(value,render) {
            console.log(value);
            // localStorage.setItem("content", render)
            // localStorage.setItem("value", value)
            this.diary.content = render
            console.log(this.diary);
        },
        uploadImg(pos, $file) {
            console.log(pos, $file);
            // 第一步.将图片上传到服务器.
            //    var formdata = new FormData();
            //    formdata.append('image', $file);
            //    axios({
            //        url: 'server url',
            //        method: 'post',
            //        data: formdata,
            //        headers: { 'Content-Type': 'multipart/form-data' },
            //    }).then((url) => {
            //        // 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)
            //        /**
            //        * $vm 指为mavonEditor实例，可以通过如下两种方式获取
            //        * 1. 通过引入对象获取: `import {mavonEditor} from ...` 等方式引入后，`$vm`为`mavonEditor`
            //        * 2. 通过$refs获取: html声明ref : `<mavon-editor ref=md ></mavon-editor>，`$vm`为 `this.$refs.md`
            //        */
            //        $vm.$img2Url(pos, url);
            //    })
        }
    }

}
</script>

<style lang="scss" scoped></style>